<template>
  <div class="login">
    <h2>欢迎登陆保洁SFA系统</h2>
    <div class="top-hat"></div>
    <div class="login-box">
      <div class="logo-wrap"><div class="logo-box"></div></div>
      <!-- 登陆表单 -->
      <div class="input-group" :class="{active: act_index==1, error: errors.has('cno')}">
        <label for="cm_code">公司编号</label>
        <input type="number" name="cno" id="" v-model="cm_code" 
           @focus="act_index=1"
           v-validate="{ required: true, min: 4, max:6 }"
        >
      </div>
      <div class="input-group"  :class="{active: act_index==2, error: errors.has('pno')}">
        <label for="PNO">员工编号</label>
        <input type="text" name="pno"  v-model="PNO"
          @focus="act_index=2"
          v-validate="{ required: true, max: 12, min: 4 }"
        >
      </div>
      <div class="input-group"  :class="{active: act_index==3, error: errors.has('pwd')}">
        <label for="passwd">登陆密码</label>
        <input type="passwd" name="pwd"  v-model="passwd"
          @focus="act_index=3"
          v-validate="{ required: true, max: 12, min: 4 }"
        >
      </div>
      <div class="ck-row">
        <div class="ckbox-wrap" @click="remembSet" :class="{active: rememb}">
          <i class="iconfont" :class="rememb?'icon-check-square':'icon-border'"></i> 
          <span>记住密码</span>
        </div>
        <div class="ckbox-wrap" @click="autologinSet" :class="{active: autologin}">
          <i class="iconfont" :class="autologin?'icon-check-square':'icon-border'"></i> 
          <span>自动登录</span>
        </div>
      </div>
    </div>
    <div class="btn-wrap" @click="loginBtnClick"><p>登录</p></div>
  </div>
</template>

<script>
import '../assets/font/iconfont.css'
import {Toast,Indicator} from 'mint-ui'
import axios from 'axios'
import {mapMutations} from 'vuex'
import service from '@/service/index.js'
export default {
  name:"login",
  data(){
    return{
      act_index: 1,
      cm_code: '',
      PNO: '',
      passwd: '',
      rememb: false,
      autologin: false
    }
  },
  mounted(){
    //强制执行校验
    let data = JSON.parse(localStorage.getItem('Login_data'));
    if (data) {
      this.cm_code = data.CNO;
      this.passwd = data.Passwd;
      this.PNO = data.PNO;
      this.autologin = data.autologin;
      this.rememb = data.rememb;
      // 强制执行校验
    }
    // this.$validator.validate();
    if (this.autologin) {
      this.loginBtnClick(); // 方法就是登录
    }
  },
  methods:{
    ...mapMutations(['initUser']),
    remembSet(){
      this.rememb = !this.rememb;
      this.rememb || (this.autologin=false);
    },
    autologinSet(){
      this.autologin = !this.autologin;
      this.autologin && (this.rememb=true);
    },
    loginBtnClick(){
      if(this.errors.any()){
        return;
      }
      console.log(this.cm_code,this.PNO);
      Indicator.open('正在登陆。。。')

      // axios({
      //   url:'http://yapi.demo.qunar.com/mock/82385/api/login',
      //   method:'get',
      //   params:{
      //     CNO: this.cm_code,
      //     PNO: this.PNO,
      //     Passwd: this.passwd
      // }
      // } )
      service.login({
          CNO: this.cm_code,
          PNO: this.PNO,
          Passwd: this.passwd
      })
      .then(res=>{
        console.log(res.data);
        if(res.data.code==1){
          localStorage.setItem(
              'Login_data',
              JSON.stringify({
                rememb: this.rememb,
                autologin: this.autologin,
                PNO: this.rememb ? this.PNO : '',
                CNO: this.rememb ? this.cm_code : '',
                Passwd: this.rememb ? this.passwd : ''
              })
            );
          Indicator.close();
          sessionStorage.setItem("LoginUser",JSON.stringify(res.data.user));
          sessionStorage.setItem("LoginToken",res.data.token);
          // this.$store.commit('initUser',res.data.user)
          this.initUser(res.data.user);
          Toast({
            message: '登陆成功!',
            duration: 2000
          });
          this.$router.push('/home');
        }else{
          Toast({
            message: '用户名密码不正确,登录失败!',
            duration: 9000
          });
          Indicator.close();
        }
      })
      .catch(e => {
        // 登录异常失败!
        console.log(e);
        Toast({
          message: '登录异常失败!',
          duration: 2000
        });
        Indicator.close();
      });
    },
    
  }
}
</script>

<style lang="scss">
  html,body,#app{
    height: 100%;
  }
</style>

<style lang="scss" scoped>
  .mint-toast is-placemiddle{
    font-size: px2rem(30)
  }
  h2 {
    height: px2rem(36);
    text-align: center;
    font-size: px2rem(36);
    color:white;
    padding:px2rem(148-36-44) 0 px2rem(44) 0;
    line-height: px2rem(36);

  }
  @mixin wrap(){
    width: px2rem(600);
    margin: 0 auto;
    background-color: #fff;
    border-radius: px2rem(20);
    
  }

  .login{
    background-color: #2ade69;
    height: 100%;
    
    .top-hat{
    width: px2rem(537);
    height: px2rem(18);
    background-color: #eee;
    margin: 0 auto;
    border-radius: px2rem(18) px2rem(18) 0 0;
    }
    .login-box{
    height: px2rem(836);
    @include wrap();
      .logo-wrap {
        padding: px2rem(80) 0;
        .logo-box {
          width: px2rem(190);
          height: px2rem(190);
          margin: 0 auto;
          background: url(../assets/logo.jpg);
          background-size: cover;
          }
      }
      @mixin rowStyle(){
        padding: 0 px2rem(36);
        color: $text-color;
        width: px2rem(401);
      }
      .input-group {
      border: 2px solid #e2e2e2;
      border-radius: px2rem(45);
      font-size: px2rem(30);
      line-height: px2rem(90);
      padding-left: px2rem(25);
      @include rowStyle();
      margin: 0 auto px2rem(30);
      input {
        border: 0 none;
        font-size: $text-size-mid;
        line-height: px2rem(90);
        width: px2rem(250);
        padding-left: 1em;
      }
    }
    .input-group.active {
      color: $act-color;
      border: 2px solid $act-color;
    }
    .input-group.error{
      border: 2px solid red;
    }
    .ck-row{
      @include rowStyle();
      display: flex;
      justify-content: space-between;
      font-size: $text-size-mid;
      padding-top: px2rem(20);
      margin: 0 auto;
      .ckbox-wrap{
        i {
          font-size: px2rem(32);
        }
      }
      .active{
        color: #2ade69;
      }

    }
    }
  }
  .btn-wrap{
    @include wrap();
    height: px2rem(100);
    margin-top: px2rem(30);
    font-weight: 700;
    line-height: px2rem(100);
    font-size: $text-size-imp;
    color: $act-color;
    text-align: center;
    letter-spacing: 1em;
   
  }
</style>

